border
主要用途是設定物件的邊框線, outline
是設定物件的外框線,這兩個很類似,但卻有一些細節有所差異,若是不清楚的話就可能會誤用,兩者的原始碼中常見的設定值為三個值,其語法規則如下
border: 1px solid red;
outline: 1px solid red;
從上面原始碼可以看到 border
與 outline
的值可以說是一模一樣啊,這樣看起來似乎沒啥差別呢!如果我們真的要用最簡單的說明的話,用兩點來快速比較好了
也因為 border 可以支援圓角的製作 ,所以在工作上面,使用 border
的機會也多過於 outline (這理由似乎很容易引戰就是了)
了解了 border
與 outline
的語法規則後,接著來細部的了解一下,實際上這兩個屬性都屬於 CSS 簡寫的方式,就像是我們之前介紹過的 background
一樣,這屬性是屬於多個屬性的簡寫,所以我們可以在裡面寫多個值,先讓我們來了解一下兩者原理一下
border: 線條尺寸 線條樣式 線條色彩;
outline: 線條尺寸 線條樣式 線條色彩;
再次的我們可以發現兩者的值可以說是完全一樣啊,其實兩者的值分別是以下屬性的組成
是的!又是一個沒差異的狀態(笑)!所以接下來 我懶了 ,除非有必要指出差異,否則一律以 border 為主要的介紹對象,不然又在騙稿費的Fu了(但明明沒稿費啊)。
border 這個簡寫由於可同時撰寫「border-width 、border-style、border-color 」三種屬性值,而此三個屬性值可設定的值的類型,又有明顯的不同,border-width 使用數值單位、border-style 使用關鍵字、border-color 使用色彩的特定設定方式,所以這表示瀏覽器對於這樣的值是不會出現辨識錯誤的狀況,所以我們在撰寫時其實可以隨意的更換這些值的順序,而不須照 Amos 所寫的順序,瀏覽器也能正常的辨識與呈現,所以以下幾種設定方式都是可以的。
border: 1px solid red;
border: solid 1px red;
border: red 1px solid;
border: red solid 1px;
所以其實有時候我們看別人的 border 設定時,會發現每個人寫的順序不同,也就是這原因了。
由於 border
可以支援圓角的設定,所以我們普遍在切版的時候較常使用到 border
,outline
一般是在表單輸入框被 focus
時,在外面那一圈變色的框線,除非設計有特別做這部份的設計,不然通常你會在 chrome 瀏覽器看到表單 focus
時出現一圈有色的光暈或加粗的邊框,或其他不同的視覺外觀,好呈現該物件取得焦點了。
border
與 outline
是兩個不同特性的存在,所以縱使你為一個物件設定了 border
,也還是能夠為該物件設定一個 outline
,只是......沒啥必要這要做,會這樣做的狀況,還是表單輸入欄位的取得焦點狀態有可能這麼做,其它狀況就看個別的專案或設計需求了。
由之前的說明我們已經可以知道 border
是下面三個屬性的簡寫,那麼我們又能怎麼運用呢?
這三個屬性我們也須要了解一下,每一個屬性又能拆解成四個方向的線條,像是下面這樣
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
所以當你要對一個物件設定四邊都長一樣的線條的時候,你可能會這樣設定
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
太棒了!你寫出了一個垃圾 code 了!(被打)
光看起來這樣的原始碼就很囉唆,因為上面這樣的寫法,我們又能簡化成單邊框線的縮寫,像是下面這樣
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
原始碼又變乾淨了對吧?! border
就是這麼一個令人感到神奇的屬性,感覺怎麼寫都可以,非常的彈性。
因為 border
有四個邊可以設定,所以我們可以把值的寫法改成針對屬性來寫,而不使用針對單邊,這樣我們就可以寫成下面這樣
border-width: 1px 1px 1px 1px;
border-style: solid solid solid solid;
border-color: red red red red;
是的!我們又返樸歸真了,回到一開始講的三個 border
屬性,但這時候須要注意的則是四個值的寫法了,針對屬性的寫法,我們可以在值中為每一個位置添加四個方向的設定,其原理就像下方這樣
border-width: 上邊框粗細 右邊框粗細 下邊框粗細 左邊框粗細;
border-style: 上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式;
border-color: 上邊框色彩 右邊框色彩 下邊框色彩 左邊框色彩;
簡單的來看,四個值的順序其實就是一個順時針的方向,所以非常好記憶,講到這邊我相信應該看的很累或很暈了,不多說,我們可以進入最後一個重點了,也就是四個方向的寫法,也能改成 1 到 4 個值的寫法,結構分別像是下面這樣
/*四個值,個別指定*/
border-width: 上 右 下 左;
/*三個值,左右採用同一個值*/
border-width: 上 [右左] 下;
/*二個值,上下採用同一值,左右採用同一值*/
border-width: [上下] [右左];
/*一個值,上下左右都使用相同的值*/
border-width: [上右下左];
很好!我們總算把一些必要的常識都了解了,接下來就讓各位好好去試寫看看了,金魚疲累的CSS屬性...我們下篇見... z z z z Z Z Z Z
「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學